<template>
  <a-modal
    :visible="visible"
    title="寄养押金管理"
    width="600px"
    @cancel="handleCancel"
    :footer="null"
  >
    <div class="deposit-modal">
      <!-- 顾客信息 -->
      <div class="customer-info">
        <h3>顾客信息</h3>
        <div class="info-grid">
          <div class="info-item">
            <span class="label">宠物名称：</span>
            <span class="value">{{ pet?.name }}</span>
          </div>
          <div class="info-item">
            <span class="label">主人姓名：</span>
            <span class="value">{{ pet?.ownerName }}</span>
          </div>
          <div class="info-item">
            <span class="label">联系电话：</span>
            <span class="value">{{ pet?.ownerPhone }}</span>
          </div>
          <div class="info-item">
            <span class="label">寄养单号：</span>
            <span class="value">{{ order?.orderName }}</span>
          </div>
        </div>
      </div>

      <!-- 押金信息 -->
      <div class="deposit-info">
        <h3>押金信息</h3>
        <div class="form-section">
          <div class="form-item">
            <span class="label">押金金额：</span>
            <a-input-number
              v-model:value="depositAmount"
              :min="0"
              :max="10000"
              :precision="2"
              style="width: 200px"
              placeholder="请输入押金金额"
            />
            <span class="unit">元</span>
          </div>
          <div class="form-item">
            <span class="label">支付方式：</span>
            <a-select
              v-model:value="paymentMethod"
              style="width: 200px"
              placeholder="请选择支付方式"
            >
              <a-select-option value="cash">现金支付</a-select-option>
              <a-select-option value="wechat">微信支付</a-select-option>
              <a-select-option value="alipay">支付宝</a-select-option>
              <a-select-option value="card">银行卡</a-select-option>
              <a-select-option value="face">刷脸支付</a-select-option>
            </a-select>
          </div>
          <div class="form-item">
            <span class="label">备注：</span>
            <a-textarea
              v-model:value="depositRemarks"
              :rows="3"
              style="width: 400px"
              placeholder="请输入押金备注信息"
            />
          </div>
        </div>
      </div>

      <!-- 支付二维码/刷脸区域 -->
      <div v-if="showPaymentArea" class="payment-area">
        <h3>支付区域</h3>
        <div class="payment-content">
          <!-- 微信支付 -->
          <div v-if="paymentMethod === 'wechat'" class="qr-payment">
            <div class="qr-code">
              <div class="qr-placeholder">
                <div class="qr-icon">📱</div>
                <div class="qr-text">微信扫码支付</div>
                <div class="qr-amount">¥{{ depositAmount.toFixed(2) }}</div>
              </div>
            </div>
            <div class="payment-tips">
              <p>请使用微信扫描二维码完成支付</p>
              <p>支付金额：¥{{ depositAmount.toFixed(2) }}</p>
            </div>
          </div>

          <!-- 支付宝 -->
          <div v-else-if="paymentMethod === 'alipay'" class="qr-payment">
            <div class="qr-code">
              <div class="qr-placeholder">
                <div class="qr-icon">💰</div>
                <div class="qr-text">支付宝扫码支付</div>
                <div class="qr-amount">¥{{ depositAmount.toFixed(2) }}</div>
              </div>
            </div>
            <div class="payment-tips">
              <p>请使用支付宝扫描二维码完成支付</p>
              <p>支付金额：¥{{ depositAmount.toFixed(2) }}</p>
            </div>
          </div>

          <!-- 刷脸支付 -->
          <div v-else-if="paymentMethod === 'face'" class="face-payment">
            <div class="face-area">
              <div class="face-placeholder">
                <div class="face-icon">👤</div>
                <div class="face-text">刷脸支付</div>
                <div class="face-amount">¥{{ depositAmount.toFixed(2) }}</div>
                <div class="face-status">请将脸部对准摄像头</div>
              </div>
            </div>
            <div class="payment-tips">
              <p>请将脸部对准摄像头完成支付</p>
              <p>支付金额：¥{{ depositAmount.toFixed(2) }}</p>
            </div>
          </div>

          <!-- 现金支付 -->
          <div v-else-if="paymentMethod === 'cash'" class="cash-payment">
            <div class="cash-info">
              <div class="cash-icon">💵</div>
              <div class="cash-text">现金支付</div>
              <div class="cash-amount">¥{{ depositAmount.toFixed(2) }}</div>
              <div class="cash-tip">请收取现金并确认</div>
            </div>
          </div>

          <!-- 银行卡支付 -->
          <div v-else-if="paymentMethod === 'card'" class="card-payment">
            <div class="card-info">
              <div class="card-icon">💳</div>
              <div class="card-text">银行卡支付</div>
              <div class="card-amount">¥{{ depositAmount.toFixed(2) }}</div>
              <div class="card-tip">请刷卡或插入银行卡</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 押金记录 -->
      <div v-if="depositRecords.length > 0" class="deposit-records">
        <h3>押金记录</h3>
        <a-table
          :columns="recordColumns"
          :data-source="depositRecords"
          :pagination="false"
          size="small"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="record.status === 'paid' ? 'green' : 'orange'">
                {{ record.status === 'paid' ? '已支付' : '待支付' }}
              </a-tag>
            </template>
            <template v-else-if="column.key === 'action'">
              <a-button
                v-if="record.status === 'pending'"
                type="text"
                size="small"
                @click="confirmPayment(record)"
              >
                确认支付
              </a-button>
              <a-button
                v-if="record.status === 'paid'"
                type="text"
                size="small"
                @click="refundDeposit(record)"
              >
                退还押金
              </a-button>
            </template>
          </template>
        </a-table>
      </div>

      <!-- 操作按钮 -->
      <div class="modal-actions">
        <a-button @click="handleCancel">取消</a-button>
        <a-button
          v-if="!showPaymentArea"
          type="primary"
          @click="createDeposit"
          :disabled="!depositAmount || !paymentMethod"
        >
          创建押金
        </a-button>
        <a-button
          v-if="showPaymentArea"
          type="primary"
          @click="confirmPayment"
          :disabled="paymentMethod === 'cash' || paymentMethod === 'card'"
        >
          确认支付
        </a-button>
      </div>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

interface Pet {
  id: string;
  name: string;
  ownerName: string;
  ownerPhone: string;
}

interface FosterOrder {
  id: string;
  orderName: string;
}

interface DepositRecord {
  id: string;
  amount: number;
  paymentMethod: string;
  status: 'pending' | 'paid' | 'refunded';
  createTime: string;
  payTime?: string;
  remarks?: string;
}

interface Props {
  visible: boolean;
  pet?: Pet;
  order?: FosterOrder;
}

interface Emits {
  (e: 'update:visible',visible: boolean): void;
  (e: 'success',record: DepositRecord): void
}

const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 响应式数据
const depositAmount = ref<number>(0);
const paymentMethod = ref<string>('');
const depositRemarks = ref<string>('');
const showPaymentArea = ref(false);
const depositRecords = ref<DepositRecord[]>([]);

// 押金记录表格列定义
const recordColumns = [
  { title: '押金金额', dataIndex: 'amount', key: 'amount' },
  { title: '支付方式', dataIndex: 'paymentMethod', key: 'paymentMethod' },
  { title: '状态', key: 'status' },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime' },
  { title: '操作', key: 'action' },
];

// 支付方式显示名称
const getPaymentMethodName = (method: string) => {
  const methodMap: Record<string, string> = {
    cash: '现金支付',
    wechat: '微信支付',
    alipay: '支付宝',
    card: '银行卡',
    face: '刷脸支付',
  };
  return methodMap[method] || method;
};

// 方法
const createDeposit = () => {
  if (!depositAmount.value || !paymentMethod.value) {
    message.warning('请填写押金金额和选择支付方式');
    return;
  }

  const newRecord: DepositRecord = {
    id: Date.now().toString(),
    amount: depositAmount.value,
    paymentMethod: paymentMethod.value,
    status: 'pending',
    createTime: dayjs().format('YYYY-MM-DD HH:mm:ss'),
    remarks: depositRemarks.value,
  };

  depositRecords.value.unshift(newRecord);
  showPaymentArea.value = true;
  message.success('押金创建成功，请完成支付');
};

const confirmPayment = (record?: DepositRecord) => {
  const targetRecord = record || depositRecords.value[0];
  if (!targetRecord) return;

  targetRecord.status = 'paid';
  targetRecord.payTime = dayjs().format('YYYY-MM-DD HH:mm:ss');

  showPaymentArea.value = false;
  message.success('支付确认成功！');

  // 重置表单
  depositAmount.value = 0;
  paymentMethod.value = '';
  depositRemarks.value = '';

  // 通知父组件
  emit('success', targetRecord);
};

const refundDeposit = (record: DepositRecord) => {
  record.status = 'refunded';
  message.success('押金退还成功！');
};

const handleCancel = () => {
  emit('update:visible', false);
  // 重置状态
  depositAmount.value = 0;
  paymentMethod.value = '';
  depositRemarks.value = '';
  showPaymentArea.value = false;
};

// 监听模态框显示状态
watch(
  () => props.visible,
  (visible) => {
    if (visible) {
      // 加载押金记录
      depositRecords.value = [
        {
          id: '1',
          amount: 500,
          paymentMethod: 'wechat',
          status: 'paid',
          createTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
          payTime: dayjs().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss'),
          remarks: '首次押金',
        },
      ];
    }
  },
);
</script>

<style scoped>
.deposit-modal {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.customer-info,
.deposit-info,
.payment-area,
.deposit-records {
  padding: 16px;
  border: 1px solid #e8e8e8;
  border-radius: 6px;
}

.customer-info h3,
.deposit-info h3,
.payment-area h3,
.deposit-records h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #333;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-item .label {
  width: 80px;
  font-size: 14px;
  color: #666;
}

.info-item .value {
  flex: 1;
  font-weight: bold;
  color: #333;
}

.form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.form-item {
  display: flex;
  gap: 8px;
  align-items: center;
}

.form-item .label {
  width: 80px;
  font-size: 14px;
  color: #666;
}

.form-item .unit {
  font-size: 14px;
  color: #666;
}

.payment-content {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

.qr-payment,
.face-payment,
.cash-payment,
.card-payment {
  text-align: center;
}

.qr-code,
.face-area {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 200px;
  margin-bottom: 16px;
  border: 2px dashed #d9d9d9;
  border-radius: 8px;
}

.qr-placeholder,
.face-placeholder {
  text-align: center;
}

.qr-icon,
.face-icon,
.cash-icon,
.card-icon {
  margin-bottom: 8px;
  font-size: 48px;
}

.qr-text,
.face-text,
.cash-text,
.card-text {
  margin-bottom: 8px;
  font-size: 16px;
  color: #333;
}

.qr-amount,
.face-amount,
.cash-amount,
.card-amount {
  margin-bottom: 8px;
  font-size: 20px;
  font-weight: bold;
  color: #1890ff;
}

.face-status,
.cash-tip,
.card-tip {
  font-size: 12px;
  color: #666;
}

.payment-tips {
  font-size: 14px;
  color: #666;
  text-align: center;
}

.payment-tips p {
  margin: 4px 0;
}

.cash-info,
.card-info {
  padding: 20px;
  text-align: center;
}

.modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-top: 16px;
  border-top: 1px solid #e8e8e8;
}
</style>
